<template>
  <div id="checklist">
    <div class="bigbox">
      <div class="table">
        <div class="sel">
          <el-input v-model="input" placeholder="请输入检验项目">
            <el-button slot="append" icon="el-icon-search">查询</el-button>
          </el-input>
        </div>
        <el-table
          :data="
            searchData == null
              ? searchData
              : searchData.slice(
                  (currentPage - 1) * pagesize,
                  currentPage * pagesize
                )
          "
          border
          style="width: 100%"
        >
          <el-table-column prop="account" label="账号" width="200">
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="200">
          </el-table-column>
          <el-table-column prop="check_name" label="检验项目" width="200">
          </el-table-column>
          <el-table-column label="编辑" width="200">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >填写检查结果</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="margin-top: 15px; margin-left: 25%">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[3, 5, 10]"
            :page-size="pagesize"
            layout="prev, pager, next,jumper"
            :total="searchData == null ? 0 : searchData.length"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        账号:
        <span>
          <el-input placeholder="请输入内容" v-model="account" :disabled="true">
          </el-input>
        </span>
        <br />
        <br />姓名:
        <el-input placeholder="请输入内容" v-model="username" :disabled="true">
        </el-input>
        <br />
        <br />项目:
        <el-input placeholder="请输入内容" v-model="checkName" :disabled="true">
        </el-input>
        <br />
        <br />检查结果:
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="checkResult"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCheckResult">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

    <script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      account: "",
      username: "",
      checkName: "",
      checkResult: "",
      dialogVisible: false,
      currentPage: 1,
      pagesize: 5,
      input: "",
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleClick(row) {
      this.dialogVisible = true;
      this.account = row.account;
      this.username = row.username;
      this.checkName = row.check_name;
    },
    queryChcekList: async function () {
      var that = this;
      await axios
        .get("http://localhost:8848/CheckList")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 0) {
            that.tableData = response.data.data;
          }
          console.log(that.tableData);
        });
    },
    saveCheckResult: async function () {
      if (this.checkResult == "" || this.checkResult == null) {
        alert("检查结果不能为空");
      } else {
        this.dialogVisible = false;
        var that = this;
        await axios
          .post("http://localhost:8848/saveCheckResult", {
            account: that.account,
            checkName: that.checkName,
            checkResult: that.checkResult,
          })
          .then(function (response) {
            console.log(response);
          });
        this.checkResult = null;
        this.queryChcekList();
        this.$notify({
                title: "检查结果保存成功",
                type: "success",
                duration: 2000,
            })
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  computed: {
    searchData: function () {
      return this.tableData.filter((tableData) =>
        tableData.check_name.includes(this.input)
      );
    },
  },
  mounted() {
    this.queryChcekList();
  },
};
</script>

<style scoped>
.sel {
  margin-bottom: 20px;
}
.fenye {
  margin-left: 10%;
}
.el-input {
  width: 60%;
  margin-right: 100px;
}
.bigbox {
  height: auto;
}
.table {
  width: 801px;
  margin-left: 28%;
  margin-top: 30px;
  margin-bottom: 40px;
}
</style>
